<template>
    <div class="center grid" >
      <!-- 头像 -->
      <vs-row class="vs-row-between-10">
        <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="12">
          <div class="div-center">
            <vs-avatar circle size="260">
          <img :src= "image" alt="">
        </vs-avatar>
      </div>
        </vs-col>
      </vs-row>  

    <vs-row class="vs-row-between-2">
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="12">
         <!-- 昵称 -->
        <div class="div-center">
          <h2 style="font-family: Eng-thin;">{{ EngName }}</h2>
        </div>
        <!-- 座右铭 -->
        <div class="div-center">
          <p class="" style="font-family: Eng-A;width: 30%;display: inline-block;white-space:normal;word-break:break-all;text-align: center;">
            {{ Motto }}
          </p>
        </div>
      </vs-col>
    </vs-row>

  <div class="introduce">
    <vs-row class="vs-row-between-3">
        <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="12">
          <h3 style="font-family: Eng-A;">Base Information</h3>
        </vs-col>
      </vs-row>  

    <hr />
<!-- 基本信息 -->
  <vs-row class="vs-row-between-2">
      <vs-col offset=2 vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Name: <b>{{ RealName }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Birth: <b>{{ RealBirth }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Gender: <b>{{ Gender }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="3">
        <span style="font-family: Eng-thin;">Address: <b>{{ Address }}</b></span>
      </vs-col>
    </vs-row>

    <vs-row class="vs-row-between-2">
      <vs-col offset=2 vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Graduate: <b>{{ School }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Degree: <b>{{ Degree }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Majoy: <b>{{ Majoy }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="3">
        <span style="font-family: Eng-thin;">Year of graduation: <b>{{ Year }}</b></span>
      </vs-col>
    </vs-row>

    <vs-row class="vs-row-between-2">
      <vs-col offset=2 vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Position: <b>{{ Position }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Expected Salary: <b>{{ Salary }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="2">
        <span style="font-family: Eng-thin;">Phone: <b>{{ Phone }}</b></span>
      </vs-col>

      <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="3">
        <span style="font-family: Eng-thin;">Email: <b>{{ Email }}</b></span>
      </vs-col>
    </vs-row>

    <vs-row class="vs-row-between-2">
      <vs-col offset="2" vs-type="flex" vs-justify="center" vs-align="center" w="9">
        <span style="font-family: Eng-thin;">Prize:</span>
        <span style="font-family: Eng-thin;white-space: pre-wrap;" v-for="key in this.Prize" :key="key"> <b>{{ key+"\n\t" }}</b></span>
      </vs-col>
    </vs-row>

    <!-- 技术点 -->
    <vs-row class="vs-row-between-1">
        <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="12">
          <h3 style="font-family: Eng-A;">Skills</h3>
        </vs-col>
      </vs-row>  
    <hr />

    <vs-row class="vs-row-between-1">
      <vs-col offset="2" vs-type="flex" vs-justify="center" vs-align="center" w="9">
        <span style="font-family: Eng-thin;white-space: pre-wrap;" v-for="key in this.Skills" :key="key">
          <box-icon name='bowl-rice'></box-icon> <b>{{ key+"\n" }}</b>
        </span>
      </vs-col>
    </vs-row>

    <!-- 技术点 -->
    <vs-row class="vs-row-between-1">
            <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="12">
              <h3 style="font-family: Eng-A;">Projects</h3>
            </vs-col>
          </vs-row>  
        <hr />

        <vs-row class="vs-row-between-2">
      <vs-col offset="2" vs-type="flex" vs-justify="center" vs-align="center" w="9">
        <span style="font-family: Eng-thin;white-space: pre-wrap;" v-for="key in this.Projects" :key="key">

          <br>
          
            <p style="text-align: center">{{ key.title+"\n" }}</p> 
          

            <p v-html="key.position" style="float: right;"></p>
            <br>
            <p v-html="key.introduce" style="float: right;"></p>
            <br>
            <p v-html="key.easyContext" style="float: right;"></p>
            <br>
        
        </span>
      </vs-col>
    </vs-row>


      </div>
    </div>
  </template>
  
  <script>
  import {HomeConfig} from '../common/var-config/home-var'
  export default {
    data:() => ({
        image: HomeConfig.HeadImage,
        EngName: HomeConfig.EnglishName,
        Motto: HomeConfig.Motto,
        RealName: HomeConfig.RealName,
        RealBirth: HomeConfig.RealBirth,
        Gender: HomeConfig.RealGender,
        Address: HomeConfig.RealAddress,
        School: HomeConfig.School,
        Degree: HomeConfig.Degree,
        Majoy: HomeConfig.Majoy,
        Year: HomeConfig.YearOfGraduation,
        Position: HomeConfig.IntendedPosition,
        Salary: HomeConfig.ExpectedSalary,
        Phone: HomeConfig.PhoneNumber,
        Email: HomeConfig.Email,
        Prize: HomeConfig.Prize,
        Skills: HomeConfig.Skills,
        Projects: HomeConfig.Projects
      }),
    methods: {
      a1(){
        console.log(this.image);
      }
    }
  }
  </script>
  
  <style>
  
  </style>